<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            border: 1px solid black;
            /*去除单元格边框外边距*/
            border-collapse: collapse;
        }

        td, th {
            border: 1px solid black;
            width: 100px;
        }

        .blank {
            height: 150px;
            background-color: #7bb7f3;
            font-size: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app">
    <table>
        <caption>成绩表</caption>
        <thead>
        <tr>
            <th>课程</th>
            <th>成绩</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <!--是数据真正显示的区域-->
        <!--v-for用于遍历我们在vue实例中定义的数据，
        使用(item,index) in XXX 语法，其中item用于接收每一次遍历获取的元素对象，
        index表示每次获取的元素下标-->
        <tr v-for="(item,index) in subjectList">
            <td>{{item.subject}}</td>
            <td>{{item.score}}</td>
            <td>
                <!--v-on指令，用于给标签元素绑定事件，
                如果不使用v-on绑定事件，就无法调用vue实例中的任何内容-->
                <button v-on:click="delData(index)">删除</button>
            </td>
        </tr>
        </tbody>
        <!--v-if效果为，当条件成立时，当前标签内的视图才会在页面中创建并显示-->
        <tfoot v-if="subjectList.length>0">
        <tr>
            <td>总得分</td>
            <td colspan="2">{{totalScore}}</td>
        </tr>
        </tfoot>
        <!--v-else必须和v-if一起使用，即当v-if中指定的条件不成立时，此处才会显示-->
        <tbody v-else>
        <tr>
            <td colspan="3" class="blank">当前暂无数据</td>
        </tr>
        </tbody>
    </table>

    <!--当条件成立时，此处的内容会在页面中显示并渲染，如果不成立在页面中就不显示，
    但是此处节点还是存在于页面中，只是display展示状态设置为了none，不展示-->
    <!--如果页面中存在一个视图需要频繁切换显示或隐藏的状态，那么建议使用v-show指定，
    如果所有的节点在页面中都存在，只是通过状态的修改来修改视图显示与否，不会因为频繁
    修改而造成资源浪费-->
    <ul v-show="subjectList.length > 0">
        <li v-for="item in subjectList">
            {{item.subject}}
        </li>
    </ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        /*设定当前页面需要使用的数据变量*/
        data: {
            subjectList: [{
                subject: '数学',
                score: 100
            }]
        },
        methods: {
            delData(index) {
                // 根据下标删除数组中对应的元素
                // 数组中的splice(startIndex,deleteCount)可以用于删除数组中的元素
                // 可以指定从哪一个下标开始，删除几个元素；
                // 当前代码表示为删除指定下标的元素
                this.subjectList.splice(index, 1);
            }
        },
        // computed 计算属性，会监测内部用于计算的元素的变化，
        // 如果内部元素发生变化，那么就会重新计算该结果
        computed: {
            totalScore() {
                return this.subjectList
                    .reduce((sum, ss) => ss.score + sum, 0);
            }
        }
    })
</script>
</html>